<template>
  <div class="OutstandOrder">
    <div v-for="(item) in data" :key="item" class="OutstandOrderList" @click="() => handle(item)">
      <div class="left">
        <div>
          <span class="lightColour">序号：</span>
          <span class="dark">{{ item.createBy }}</span>
        </div>
        <div class="lightColour line">车主姓名：</div>
        <div class="dark" style="font-size: 14px;">{{ item. carName }}</div>
      </div>
      <div class="right">
        <div>
          <span class="lightColour">创建日期：</span>
          <span class="dark">{{ item.orderTime }}</span>
        </div>
        <div class="lightColour line">车牌号/发动机号：</div>
        <div class="dark" style="font-size: 14px;">{{ item.vinNo }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { unList } from '@/api/system'
export default {
  name: 'OutstandOrderList',
  data () {
    return {
      data: []
    }
  },
  props: {
    // eslint-disable-next-line vue/require-default-prop
    modal: {
      type: Function
    }
  },
  async created () {
    const res = await unList()
    this.data = res.rows
  },
  methods: {
    handle (item) {
      this.modal(item)
    }
  }
}

</script>
<style lang="less" scoped>
.OutstandOrder{
  padding: 0 0 0 11px;
  height: 650px;
  height:  e("calc(100vh - 203px)");
  overflow-y: scroll;
}
.OutstandOrderList{
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 20px;
  cursor: pointer;
  padding: 0 0 0 33px;
  border-bottom: 1px solid #E9E9E9;
  padding-bottom: 10px;
  .left{
    margin-right: 20px;
  }
  .line{
    margin: 10px 0 4px 0;
  }
}
.lightColour{
  font-family: "PingFangSC-Regular";
  font-size: 12px;
  color: #777777;
  letter-spacing: 0;
  line-height: 14px;
  font-weight: 400;
}
.dark{
  font-family: "PingFangSC-Regular";
  font-size: 12px;
  color: #000000;
  text-align: left;
  line-height: 14px;
  font-weight: 400;
}
</style>
